Micron Document
baubs git

Node / mirrors / respira / commits / 77c4c2f

Commit 77c4c2fcdb92c6eec399c495be89915bf5757f85

󰉖 Browse tree at this commit

Parents : 7346526
Author : Jan-Henrik Bruhn <hi@jhbruhn.de>
Date : 2025-12-07T13:06:12+01:00

Improve header typography hierarchy and layout

- Increased title size from text-sm to text-lg for better prominence
- Moved serial number to upper row next to title (prevents truncation)
- Improved font sizes: serial (text-sm), controls (text-xs), not connected (text-sm)
- Enlarged icons and padding for better touch targets and readability
- Increased vertical spacing between rows for better breathing room

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Changes

1 files changed, 13 insertions(+), 11 deletions(-)

M src/App.tsx +13 -11

Diff

diff --git a/src/App.tsx b/src/App.tsx
index 4ac0285..6cb39e0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -116,31 +116,33 @@ function App() {
<div className="w-2.5 h-2.5 bg-gray-400 rounded-full -ml-2.5" style={{ visibility: !machine.isConnected ? 'visible' : 'hidden' }}></div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
- <h1 className="text-sm font-bold text-white leading-tight">SKiTCH Controller</h1>
+ <h1 className="text-lg font-bold text-white leading-tight">SKiTCH Controller</h1>
+ {machine.isConnected && machine.machineInfo?.serialNumber && (
+ <span className="text-sm text-blue-200">• {machine.machineInfo.serialNumber}</span>
+ )}
{machine.isPolling && (
- <ArrowPathIcon className="w-3 h-3 text-blue-200 animate-spin" title="Auto-refreshing status" />
+ <ArrowPathIcon className="w-3.5 h-3.5 text-blue-200 animate-spin" title="Auto-refreshing status" />
)}
</div>
- <div className="flex items-center gap-2 mt-0.5 min-w-0">
- <p className="text-xs text-blue-200 truncate">
- {machine.isConnected ? (machine.machineInfo?.serialNumber || 'Connected') : 'Not Connected'}
- </p>
- {machine.isConnected && (
+ <div className="flex items-center gap-2 mt-1">
+ {machine.isConnected ? (
<>
<button
onClick={machine.disconnect}
- className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-white/10 hover:bg-white/20 text-blue-100 hover:text-white border border-white/20 hover:border-white/30 cursor-pointer transition-all flex-shrink-0"
+ className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-xs font-medium bg-white/10 hover:bg-white/20 text-blue-100 hover:text-white border border-white/20 hover:border-white/30 cursor-pointer transition-all flex-shrink-0"
title="Disconnect from machine"
aria-label="Disconnect from machine"
>
- <XMarkIcon className="w-2.5 h-2.5" />
+ <XMarkIcon className="w-3 h-3" />
Disconnect
</button>
- <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-white/20 text-white border border-white/30 flex-shrink-0">
- <StatusIcon className="w-2.5 h-2.5" />
+ <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-xs font-semibold bg-white/20 text-white border border-white/30 flex-shrink-0">
+ <StatusIcon className="w-3 h-3" />
{machine.machineStatusName}
</span>
</>
+ ) : (
+ <p className="text-sm text-blue-200">Not Connected</p>
)}
</div>
</div>

Served by rngit 1.4.2 - Generated in 0.15s